<template>
	<view class="container">
		<view>
			<desc-wrapper :title="title" :desc="desc"></desc-wrapper>
			<z-card>
				<view class="card-content-item">
					<text class="card-content-label_left">类型</text>
					<view class="card-content_right">
						<uni-data-checkbox selectedColor="#4e6542" selectedTextColor="#333" v-model="form.type"
							:localdata="calendar" @change="lunarChange"></uni-data-checkbox>
					</view>
				</view>
				<view class="card-content-item">
					<text class="card-content-label_left">日期</text>
					<view class="card-content_right flex-row flex-wrap flex-1">
						<uni-data-select class="year grow-0" isCustomIndicator 
							style="margin-bottom: 10rpx;margin-right: 10rpx;" :clear="false" v-model.number="form.year"
							:localdata="yearData" @change="yearChange"></uni-data-select>
						<uni-data-select class="time grow-0" isCustomIndicator 
							style="margin-bottom: 10rpx;margin-right: 10rpx;" :clear="false" v-model.number="form.month"
							:localdata="monthData" @change="monthChange"></uni-data-select>
						<uni-data-select class="time grow-0" isCustomIndicator
							style="margin-bottom: 10rpx;margin-right: 10rpx;" :clear="false" v-model.number="form.day"
							:localdata="dayData" @change="dayChange"></uni-data-select>
						<uni-data-select class="time grow-0" isCustomIndicator style="margin-bottom: 10rpx;margin-right: 10rpx;"
							 :clear="false" v-model.number="form.hours" :localdata="hourData"
							@change="hourChange"></uni-data-select>
						<uni-data-select class="time grow-0" isCustomIndicator style="margin-bottom: 10rpx;margin-right: 10rpx;"
							 :clear="false" v-model.number="form.minute" :localdata="minuteData"
							@change="minuteChange"></uni-data-select>
						<uni-data-select class="time grow-0" isCustomIndicator style="margin-bottom: 10rpx;margin-right: 10rpx;"
							 :clear="false" v-model.number="form.second" :localdata="secondData"
							@change="secondChange"></uni-data-select>
					</view>
				</view>
				<view class="card-content-item" style="display: flex;align-items: center;">
					<text class="card-content-label_left">转换后</text>
					<view class="card-content_right" style="margin-right: 15rpx;">
						{{date?form.type?'阳历':'阴历':''}}
					</view>
					<text
						v-if="form.type">{{date?(date.solar_year+'-'+date.solar_month+'-'+date.solar_day+' '+date.solar_hour+':'+date.solar_minute+':'+date.solar_second):''}}</text>
					<text
						v-else>{{date?(date.lunar_year+'-'+date.lunar_month+'-'+date.lunar_day+' '+date.lunar_hour+':'+date.lunar_minute+':'+date.lunar_second):''}}</text>
				</view>
				<view class="card-content-item">

				</view>
			</z-card>
			<view class="bottom-btns">
				<view class="start-btn" @click="onClick_1">
					<text class="">开始转换</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '阴阳历转换',
				desc: '测试方法：输入您的信息，点击立即查询，并查看查询结果，请自行体会其中的指示。',
				form: {
					type: 0, //这里0又变阳历(公历) 神经病
					year: Number(new Date().getFullYear()),
					month: Number(new Date().getMonth()) + 1,
					day: Number(new Date().getDate()),
					hours: Number(new Date().getHours()),
					minute: Number(new Date().getMinutes()),
					second: Number(new Date().getSeconds())
				},
				date: null,
				calendar: [{
						value: 0,
						text: '农历'
					},
					{
						value: 1,
						text: '公历'
					}
				],
				yearData: [],
				monthData: [],
				dayData: [],
				hourData: [],
				minuteData: [],
				secondData: [],
			};
		},
		onLoad() {
			for (let i = 1910; i <= 2023; i++) {
				this.yearData.push({
					value: i,
					text: i + '年'
				})
			}

			for (let i = 1; i <= 12; i++) {
				this.monthData.push({
					value: i,
					text: i + '月'
				})
			}

			for (let i = 1; i <= 30; i++) {
				this.dayData.push({
					value: i,
					text: i + '日'
				})
			}
			for (let i = 0; i <= 23; i++) {
				this.hourData.push({
					value: i,
					text: i + '时'
				})
			}
			for (let i = 0; i <= 59; i++) {
				this.minuteData.push({
					value: i,
					text: i + '分'
				})
			}
			for (let i = 0; i <= 59; i++) {
				this.secondData.push({
					value: i,
					text: i + '秒'
				})
			}
		},
		methods: {
			yearChange() {},
			monthChange() {},
			dayChange() {},
			hourChange() {},
			minuteChange() {},
			secondChange() {},
			//切换农历触发
			lunarChange(e) {
				this.form.type = e.detail.value
				console.log(e)
			},
			onClick_1() {
				let that = this;
				uni.request({
					url: 'https://cs.appzdm.com:3000/Gongju/solarlunartrans',
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: this.form,
					success: (res) => {
						console.log(res, '@@@@@@@');
						that.date = res.data.data
					},
					fail: (error) => {
						console.error('Request Failed:', error);
					}
				});

			},
			onClick_2() {
				// alert(1);
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import '../../static/style/common.scss';
	@import '../../static/style/marriage/index.scss';



	.radio-content {
		height: 40rpx;
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}

	.radio {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		border: 2rpx solid #275515;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0rpx 26rpx 0rpx 15rpx;
	}

	.radio-active {
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		background-color: #275515;
	}

	.radio-default {
		border: 2rpx solid #0fbda6;
	}

	.radio-right {
		margin-left: 26rpx;
	}

	/deep/ .uni-select {
		height: 56rpx;
		border: 1px solid #22630985;
	}
	
	::v-deep .year .uni-select{
				width: 165rpx;
		    }
	::v-deep .time .uni-select{
			width: 115rpx;
			}
</style>